<template>
  <a-card :bordered='false' style='width: 100%'>
    <search :config='searchConfig' @search='search' @getHeight='getHeight' />
    <!--    表格区域-->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        :border='true'
        :resizable='true'
        :showOverflow='true'
        size='mini'
        :loading='loading'
        :height='pageHeight-seachHeight-90'
        :align='left'
        :columns='columns'
        :data='dataSource'
        :toolbar-config='tableToolbar'
        @radio-change='radioChangeEvent'
        :radio-config="{ trigger: 'row'}"
      >
        <template #toolbar_buttons>
          <div class='table-operator'>
            <a-button type='primary' @click='handleAdd'>新增</a-button>
            <a-button type='primary' @click='batchDel'>删除</a-button>
            <a-button type='primary' :disabled='selectionRows.length!==1' v-has="'business:log'"
                      @click="handleBusiness('路由配置')">日志
            </a-button>
          </div>
        </template>

        <template #routeId='{ row:record }'>
          <a @click="handDetail(record,'detail')">
            {{ record.routeId }}
          </a>
        </template>

        <template #status='{ row }'>
          {{ row.status == 1 ? '启用' : '停用' }}
        </template>

        <template #action='{ row:record }'>
          <a @click="handDetail(record,'edit')">编辑</a>
        </template>

        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync='ipagination.current'
            :page-size.sync='ipagination.pageSize'
            :total='ipagination.total'
            :pageSizes='ipagination.pageSizeOptions'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <business-log ref='businessLog'></business-log>
    <formItems ref='modalForm' @okpopup='modalFormOk' v-bind='configw'></formItems>

  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import formItems from '@comp/cn-components/FormItems'
import { getAction, postAction } from '@/api/manage'
import search from '@comp/view/base-crud/search/Search'
export default {
  name: 'gateWayConfig',
  mixins: [PageListMixin],
  components: {
    formItems,
    search
  },
  data() {
    return {
      footerButton: true,
      luyouid2: false,
      luyouid: false,
      form: this.$form.createForm(this),
      queryParam: {},
      searchConfig:[
        {
          type: 'input',
          name: 'routeId',
          placeholder: '请输入路由ID'
        }],
      columns: [
        { type: 'radio', width: 60, fixed: 'left' },

        {
          title: '路由ID',
          field: 'routeId',
          minWidth:100,
          slots: { default: 'routeId' }
        },
        {
          title: '状态',
          field: 'status',
          minWidth: 80,
          slots: { default: 'status' }
        },
        {
          title: '转发目标URL',
          align: 'center',
          minWidth: 110,
          field: 'routeUri'
        },
        {
          title: '路由执行顺序',
          align: 'center',
          minWidth: 110,
          field: 'routeOrder'
        },
        {
          title: '创建人',
          field: 'createName',
          minWidth: 80,
        },
        {
          title: '创建时间',
          field: 'createTime',
          minWidth: 80,
        },
        {
          title: '更新人',
          field: 'updateName',
          minWidth: 80,
        },
        {
          title: '更新时间',
          field: 'updateTime',
          minWidth: 80,
        },
        {
          title: '操作',
          field: 'action',
          width: 150,
          fixed: 'right',
          slots: { default: 'action' }
        }
      ],
      dataSource: [],
      timer: null,
      url: {
        list: window._CONFIG['domianRouteURL'] + '/gatewayroutes/findPageList',
        save: window._CONFIG['domianRouteURL'] + '/gatewayroutes/saveOrUpdate',
        delete: window._CONFIG['domianRouteURL'] + '/gatewayroutes/delete',
        detail: window._CONFIG['domianRouteURL'] + '/gatewayroutes/getinfo'
      }
    }
  },
  methods: {
    handleStatus(statuss) {
      if (this.selectedRowKeys.length == 0) {
        this.$message.info('请至少选择一项')
        return
      }
      let param = {
        id: this.selectedRowKeys[0],
        status: statuss
      }
      postAction(this.url.save, param).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.loadData()
      })
    },
    handleAdd(cord) {
      this.luyouid2 = false
      this.luyouid = false
      this.$refs.modalForm.fornOn()
    },
    handDetail(cord, status) {
      if (status == 'detail') {
        this.luyouid2 = true
        this.luyouid = true
        this.footerButton = false
        this.$refs.modalForm.fornOn(cord, status)
      } else if (status == 'edit') {
        this.luyouid2 = false
        this.luyouid = true
        this.footerButton = true
        this.$refs.modalForm.fornOn(cord, cord.id)
      } else {
        this.luyouid2 = false
        this.luyouid = false
        this.footerButton = true
        this.$refs.modalForm.fornOn()
      }
    },
    textAreaB(e, key) {
      let that = this
      return function() {
        if (that.timer) clearTimeout(that.timer)
        that.timer = setTimeout(() => {
          // let text = JSON.stringify(e.target.value)
          that.queryParam[key] = JSON.stringify(e.target.value)
          console.log(that.queryParam[key])
        }, 3000)
      }()
    },

    isJSON(str) {
      try {
        let obj = JSON.parse(str)
        return !!obj && typeof obj === 'object'
      } catch (e) {
      }
      return false
    },
    modalFormOk(cord, pattern) {
      let params = {
        ...cord
      }
      if (pattern) {
        params.id = pattern
      }
      let a = this.isJSON(params.predicates)
      let b = this.isJSON(params.filters)
      if (!b) {
        params.filters = JSON.stringify(params.filters)
      }
      if (!a) {
        params.predicates = JSON.stringify(params.predicates)
      }
      this.loading = true
      postAction(this.url.save, params).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
        } else {
          this.$message.success(res.message)
          this.loadData()
        }
      }).finally(()=>{
        this.loading = false
      })
    },
    onClickRow(record) {
      return {
        on: {
          click: () => {
            let keys = this.selectedRowKeys
            if (keys.indexOf(record.id) == -1) {
              keys = [record.id]
              this.selectionRows = record
            }
            this.selectedRowKeys = keys
          }
        }
      }
    },
    clickHandler(e) {
      console.log(e)
    }

  },
  computed: {
    configw() {
      return {
        title: '新增网关',
        width: 500,
        config: {
          list: [
            {
              label: '路由ID',
              type: 'input',
              disabled: this.luyouid,
              placeholder: '请输入路由ID',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              disabled: this.luyouid2,
              label: '目标URL',
              type: 'input',
              placeholder: '请输入目标URL',
              name: 'routeUri',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              disabled: this.luyouid2,
              label: '执行顺序',
              type: 'input',
              placeholder: '请输入执行顺序',
              name: 'routeOrder',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              disabled: this.luyouid2,
              label: '过滤器字符串',
              type: 'inputJSON',
              inputType: 'textarea',
              placeholder: '请输入过滤器字符串',
              name: 'filters',
              methods: true,
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              disabled: this.luyouid2,
              label: '断言字符串集合',
              type: 'inputJSON',
              inputType: 'textarea',
              placeholder: '请输入断言字符串',
              name: 'predicates',
              methods: true,
              check: { rules: [{ required: true, message: '请输入' }] }
            }
          ]
        },
        footerButton: this.footerButton
      }
    }
  }
}
</script>

<style scoped>

.ant-form-item {
  margin-bottom: 11px !important;
}

.table-page-search-submitButtons {
  display: block;
  margin-bottom: 0px !important;
  white-space: nowrap;
}
</style>